﻿function ImageRepository() {
  this.Ground = new Image();
  this.Tomb   = [new Image(), new Image()];
  this.Focus  = [new Image(), new Image()];
  this.Wall   = [new Image(), new Image()];
  this.End    = [new Image(), new Image()];

  this.imageModes = {"main": 0, "semi": 1};

  var _imgLoaded = 0;
  this.IsLoaded = function () {
    return _imgLoaded == 9;
  }

  this.LoadContent = function () {
    _imgLoaded = 0;

    //go through all properties and load images
    var imgLoad = function () {
      _imgLoaded++;
    }

    this.Ground.onload   = imgLoad;
    this.Tomb[0].onload  = imgLoad;
    this.Tomb[1].onload  = imgLoad;
    this.Focus[0].onload = imgLoad;
    this.Focus[1].onload = imgLoad;
    this.Wall[0].onload  = imgLoad;
    this.Wall[1].onload  = imgLoad;
    this.End[0].onload   = imgLoad;
    this.End[1].onload   = imgLoad;

    // this is workaround to load cached image in Chrome,
    // assigning string.empty and later true value will force onload event to fire
    this.Ground.src   = '';
    this.Tomb[0].src  = '';
    this.Tomb[1].src  = '';
    this.Focus[0].src = '';
    this.Focus[1].src = '';
    this.Wall[0].src  = '';
    this.Wall[1].src  = '';
    this.End[0].src   = '';
    this.End[1].src   = '';

    this.Ground.src   = "images/ground.png";
    this.Tomb[0].src  = "images/tomb.png";
    this.Tomb[1].src  = "images/tomb-semi.png";
    this.Focus[0].src = "images/focus.png";
    this.Focus[1].src = "images/focus-semi.png";
    this.Wall[0].src  = "images/wall3.png";
    this.Wall[1].src  = "images/wall3-semi.png";
    this.End[0].src   = "images/end2.png";
    this.End[1].src   = "images/end2-semi.png";
  }
}

function DrawableElement() {
  var image;
  var width;
  this.GetImage = function () {
    //implement this method in your sub-class if your element is represented by image
    //this should return Image object
    return image;
  }
  this.GetWidth = function () {
    return null;
  }
  this.ImageRepository = width;
}

function Tomb() {
  image = this.ImageRepository.Tomb;
  width = 2;
}
function Focus() {
  image = this.ImageRepository.Focus;
  width = 3;
}
function Wall() {
  image = this.ImageRepository.Wall;
  width = 1;
}

Tomb.prototype = new DrawableElement();
Tomb.prototype.constructor = Tomb;
Focus.prototype = new DrawableElement();
Focus.prototype.constructor = Focus;
Wall.prototype = new DrawableElement();
Wall.prototype.constructor = Wall;
